<template>
  <div class="employees">
    <!-- 员工管理顶部组件 -->
    <Social />

    <el-tabs type="border-card">
      <el-table
        :data="employeeBaseInfo"
        style="width: 100%"
        border
        :default-sort="{ prop: 'date', order: 'descending' }"
        class="tableWth"
      >
        <el-table-column
          prop="date"
          type="index"
          label="序号"
          sortable
          width="180"
          fixed
        />

        <!-- 姓名 -->
        <el-table-column
          staff-photo
          prop="username"
          label="姓名"
          sortable
          width="180"
          fixed
        />

        <!-- 员工头像 -->
        <!-- <el-table-column label="员工头像" width="180" fixed>
          <template slot-scope="{ row }">
            <img v-img="myImage" :src="row.staffPhoto" />
          </template>
        </el-table-column> -->

        <!-- 手机号 -->
        <el-table-column prop="mobile" label="手机号" sortable width="180" />

        <!-- 工号 -->
        <el-table-column prop="workNumber" label="工号" sortable width="180" />

        <!-- 聘用形式 -->
        <el-table-column label="聘用形式" sortable width="180">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | myEmploy }}
          </template>
        </el-table-column>

        <!-- 部门 -->
        <el-table-column
          prop="departmentName"
          label="部门"
          sortable
          width="180"
        />

        <!-- 入职时间 -->
        <el-table-column
          prop="correctionTime"
          label="入职时间"
          sortable
          width="180"
        />

        <!-- <el-table-column
          prop="officialTime"
          label="转正日期"
          sortable
          width="180"
        /> -->

        <!-- 操作 -->
        <el-table-column label="操作" sortable width="280">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="toEmployees(row)">
              查看
            </el-button>

            <el-button size="mini" type="text">转正</el-button>
            <el-button size="mini" type="text">调岗</el-button>
            <el-button size="mini" type="text">离职</el-button>
            <el-button size="mini" type="text" @click="role(row)">
              角色
            </el-button>
            <el-button size="mini" type="text" @click="del(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>

    <!-- 分配权限弹框 -->
    <el-dialog title="分配权限" :visible.sync="roleShow">
      <el-form>
        <el-form-item>
          <div class="role_name">{{ roleList }}</div>
          <el-checkbox-group v-model="roleList">
            <el-checkbox
              v-for="(item, index) in allRole"
              :key="index"
              class="checkbox"
              :label="item.name"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>

          <!-- 按钮 -->
          <div class="role_bnt">
            <el-button size="mini" type="primary"> 确 定 </el-button>
            <el-button size="mini" @click="roleShow = false"> 取 消 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="js">
// const cityOptions = ['人事经理', '系统管理员', '人事专员', '薪资专员', '员工']
// 导入枚举文件
import MyData from '@/api/constant/employees.js'

import {
  // 分配角色权限
  getAllRoleApi,
  // 给员工分配角色
  getAddAssignRolesApi
} from '@/api/role.js'
import {
// 请求用户数据
  getAddBaseApi,
  // 根据 id 删除员工
  getDelEmployeeApi
} from '@/api/employee.js'
import Social from '@/views/social'

export default {
  name: 'Employees',
  components: {
    Social
  },
  props: {
    isEmployeeShow: Boolean
  },

  data() {
    return {
      hireType: MyData.hireType, // 导入枚举文件
      employeeBaseInfo: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSizes: [5, 10, 15, 20, 25, 30, 50], // 总页容量
      pageSize: 5, // 分页容量
      page: 1, // 分页
      total: 0, // 总条数
      userInfoList: {}, // 当前行的数据
      myImage: require('@/assets/common/xiaojiejie.jpg'),
      roleShow: false, // 角色
      roleList: [], // 选中的角色权限
      allRole: [], // 服务器返回的所有角色
      roleTotal: [] // 服务器返回的总共多少个角色

    }
  },
  // 钩子
  mounted() {
    this.getAddBase()
    this.getAllRole()
  },
  methods: {
    // 权限分配面板
    role(row) {
      this.roleShow = true
    },
    // 复选框
    handleCheckedCitiesChange(value) {
      console.log(value)
    },
    // 获取所有角色的权限
    async  getAllRole() {
      const res = await getAllRoleApi()
      this.allRole = res.data.rows
      this.roleTotal = res.total
      console.log(this.allRole)
    },
    // 删除列表数据
    del(row) {
      this.$confirm('确定删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await getDelEmployeeApi(row.id)
        this.getAddBase()
        this.$message({
          type: 'success',
          message: res.message
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取列表信息
    async  getAddBase() {
      const res = await getAddBaseApi({
        page: this.page,
        pagesize: this.pageSize
      })
      this.employeeBaseInfo = res.data.rows
      // console.log(res)
      this.total = res.data.total
    },
    // 页码容量改变
    handleSizeChange(size) {
      this.pageSize = size
      this.getAddBase()
    },
    // 页码改变
    handleCurrentChange(page) {
      this.page = page
      this.getAddBase()
    },
    // 点击查看按钮
    toEmployees(row) {
      this.$router.push(`/employees/examineInfo/?id=${row.id}`)
    }
  }
}
</script>

<style lang="scss" scope>
.employees {
  margin: 50px 50px;
  .table_1_column {
    .tableWth {
      text-align: center;
    }
  }
  .el-card.is-always-shadow {
    margin-top: 30px;
  }
  .checkbox {
    margin-left: 50px;
  }
  .role_bnt {
    margin-left: 300px;
  }
  .role_name {
    margin-left: 80px;
    font-size: 18px;
  }
}
</style>
